<template>
    <div class="order-container">
      <h1>订单管理</h1>
      <a-card class="order-card">
        <template #title>订单列表</template>
        <a-table :columns="columns" :data="tableData" :pagination="pagination">
          <template #status="{ record }">
            <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
          </template>
          <template #operation="{ record }">
            <a-space>
              <a-button type="text" size="small" @click="viewOrder(record)">查看</a-button>
              <a-button type="text" size="small" @click="editOrder(record)">编辑</a-button>
            </a-space>
          </template>
        </a-table>
      </a-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue';
  
  // 表格列定义
  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNumber',
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
    },
    {
      title: '订单金额',
      dataIndex: 'amount',
    },
    {
      title: '下单时间',
      dataIndex: 'orderTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: '操作',
      slotName: 'operation',
    },
  ];
  
  // 模拟数据
  const tableData = reactive([
    {
      id: 1,
      orderNumber: 'ORD-2025-0001',
      customerName: '张三',
      amount: '¥1,299.00',
      orderTime: '2025-03-26 10:30:25',
      status: '已付款',
    },
    {
      id: 2,
      orderNumber: 'ORD-2025-0002',
      customerName: '李四',
      amount: '¥899.50',
      orderTime: '2025-03-26 14:15:10',
      status: '已发货',
    },
    {
      id: 3,
      orderNumber: 'ORD-2025-0003',
      customerName: '王五',
      amount: '¥2,499.00',
      orderTime: '2025-03-27 09:05:33',
      status: '待付款',
    },
    {
      id: 4,
      orderNumber: 'ORD-2025-0004',
      customerName: '赵六',
      amount: '¥3,699.00',
      orderTime: '2025-03-27 10:45:18',
      status: '已完成',
    },
  ]);
  
  // 分页配置
  const pagination = reactive({
    total: 100,
    current: 1,
    pageSize: 10,
  });
  
  // 获取状态标签颜色
  const getStatusColor = (status) => {
    const colorMap = {
      '待付款': 'orange',
      '已付款': 'blue',
      '已发货': 'purple',
      '已完成': 'green',
      '已取消': 'red',
    };
    return colorMap[status] || 'gray';
  };
  
  // 查看订单详情
  const viewOrder = (record) => {
    console.log('查看订单:', record);
    // 实现查看订单详情的逻辑
  };
  
  // 编辑订单
  const editOrder = (record) => {
    console.log('编辑订单:', record);
    // 实现编辑订单的逻辑
  };
  </script>
  
  <style scoped>
  .order-container {
    padding: 20px;
  }
  
  .order-card {
    margin-bottom: 20px;
  }
  </style>